<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>缓冲区分析划线画图。。。</title>
    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="viewDiv">
    <div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="画线">
        <span class="esri-icon-polyline"></span>
    </div>
    <div id="area-button" class="esri-widget esri-widget--button esri-interactive" title="画面">
        <span class="esri-icon-polygon"></span>
    </div>
    <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="画点">
        <span class="esri-icon-radio-checked"></span>
    </div>
    <div id="circle-button" class="esri-widget esri-widget--button esri-interactive" title="画圆">
        <span class="esri-icon-radio-unchecked"></span>
    </div>
    <div id="rectangle-button" class="esri-widget esri-widget--button esri-interactive" title="画矩形">
        <span class="esri-icon-checkbox-unchecked"></span>
    </div>
</div>
<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/views/2d/draw/Draw",
        "esri/Graphic",
        "esri/geometry/Polyline",
        "esri/geometry/Polygon",
        "esri/geometry/Point",
        "esri/geometry/Circle",
        "esri/geometry/geometryEngine",
        "dojo/domReady!"
    ], function (
        Map, MapView,
        Draw, Graphic,
        Polyline, Polygon, Point, Circle, geometryEngine
    ) {
        var map = new Map({
           basemap:"streets"// basemap: "osm"
        });

        //二维视图
        var view = new MapView({
            map: map,
            container: "viewDiv",
            logo: false,
            center: [98.01, 33.80],
            zoom: 16,

        });

        //添加图层标注
        var image = {
            type: 'picture-marker',
            url: 'http://localhost:65022/images/电子地图图标/炼化（故障）.png',
            width: '32px',
            height: '32px',
        };
        //设置点的位置
        var position = {
            type: 'point',
            longitude: 98.01,
            latitude: 33.80,
        };
        //将点的样式和位置放在Graphic里面
      var Graphic1 = new Graphic({
            geometry: position,
            symbol: image,
        });
        //显示图标
        view.graphics.add(Graphic1);


        //添加工具(点面线等)
        var highlight;
        view.on("click", function (event) {
            if (highlight) {
                highlight.remove();
            }
            view.hitTest(event).then(function (response) {
                if (response.results[0]) {
                    var graphic = response.results[0].graphic;
                    console.log(graphic);
                    view.whenLayerView(graphic.layer).then(function (lyrView) {
                        highlight = lyrView.highlight(graphic);
                    })
                }
            })
        });

        view.ui.add("line-button", "top-left");//添加绘制线按钮，自定义UI
        view.ui.add("area-button", "top-left");//添加绘制面按钮，自定义UI
        view.ui.add("point-button", "top-left");//添加绘制面按钮，自定义UI
        view.ui.add("circle-button", "top-left");//添加绘制面按钮，自定义UI
        view.ui.add("rectangle-button", "top-left");//添加绘制面按钮，自定义UI
        // view.ui.remove("attribution");//移除底部ESRI logo
        var polySym = {
            type: "simple-fill", // autocasts as new SimpleFillSymbol()
            color: [140, 140, 222, 0.5],
            outline: {
                color: [0, 0, 0, 0.5],
                width: 2
            }
        };

        var graphicarr=[];
        view.when(function () {
            var draw = new Draw({
                view: view
            });
            //绑定线按钮绘制事件
            var drawLineButton = document.getElementById("line-button");
            drawLineButton.onclick = function () {
                view.graphics.removeAll();//清楚之前的绘制
                enableCreateLine(draw, view);
            };
            //绑定面按钮绘制事件
            var drawAreaButton = document.getElementById("area-button");
            drawAreaButton.onclick = function () {
                view.graphics.removeAll();//清楚之前的绘制
                enableCreateArea(draw, view);
            };
            //绑定面按钮绘制事件
            var drawPointButton = document.getElementById("point-button");
            drawPointButton.onclick = function () {
                enableCreatePoint(draw, view);
            };
            //绑定面按钮绘制事件
            var drawCircleButton = document.getElementById("circle-button");
            drawCircleButton.onclick = function () {
                enableCreateCircle(draw, view);
            };
            //绑定面按钮绘制事件
            var drawRectangleButton = document.getElementById("rectangle-button");
            drawRectangleButton.onclick = function () {
                enableCreateRectangle(draw, view);
            };
        });
        //开始监听画线
        function enableCreateLine(draw, view) {
            var action = draw.create("polyline", {
                mode: "click"
            });
            // 获取焦点
            view.focus();

            // 顶点添加事件
            action.on("vertex-add", createPolyline);


            //顶点移除事件
            action.on("vertex-remove", createPolyline);


            // 鼠标移动事件
            action.on("cursor-update", createPolyline);


            // 绘制完成事件
            action.on("draw-complete", createPolyline);


        }
        //开始监听画面
        function enableCreateArea(draw, view) {
            var action = draw.create("polygon", {
                mode: "click"//点击方式加点
            });
            // 获取焦点
            view.focus();

            // 顶点添加事件
            action.on("vertex-add", createPolygon);


            //顶点移除事件
            action.on("vertex-remove", createPolygon);


            // 鼠标移动事件
            action.on("cursor-update", createPolygon);


            // 绘制完成事件
            action.on("draw-complete", createPolygon);


        }
        //开始监听画点
        function enableCreatePoint(draw, view) {
            var action = draw.create("point", {
                mode: "click"//点击方式加点
            });
            // 获取焦点
            view.focus();

            // 顶点添加事件
            action.on("vertex-add", createPoint);


            //顶点移除事件
            action.on("vertex-remove", createPoint);


            // 绘制完成事件
            action.on("draw-complete", createPoint);


        }
        //开始监听画圆
        function enableCreateCircle(draw, view) {
            var action = draw.create("circle", {
                mode: "click"//点击方式加点
            });
            // 获取焦点
            view.focus();
            //顶点移除事件
            action.on("vertex-remove", createCircle);
            // 鼠标移动事件
            action.on("cursor-update", createCircle);
            // 绘制完成事件
            action.on("draw-complete", createCircle);
        }
        //开始监听画矩形
        function enableCreateRectangle(draw, view) {
            var action = draw.create("rectangle", {
                mode: "click"//点击方式加点
            });
            // 获取焦点
            view.focus();

            //顶点移除事件
            action.on("vertex-remove", createRectangle);
            // 鼠标移动事件
            action.on("cursor-update", createRectangle);
            // 绘制完成事件
            action.on("draw-complete", createRectangle);

        }
        //根据点坐标生成新的线
        function createPolyline(event) {
            //获取所有顶点
            var vertices = event.vertices;
            //清除之前绘制
            view.graphics.removeAll();
            var line = new Polyline({
                paths: vertices,
                spatialReference: view.spatialReference
            });
            // 生成绘制的图形
            var graphic = new Graphic({
                geometry: line,
                symbol: {
                    type: "simple-line", // autocasts as new SimpleFillSymbol
                    color: [4, 90, 141],
                    width: 4,
                    cap: "round",
                    join: "round"
                }
            });
            // 将绘制的图形添加到view
            view.graphics.add(graphic);
            if (event.type == "draw-complete") {
                createBuffer(line);
            }
        }
        //根据点坐标生成新的线
        function createPolygon(event) {
            //获取所有顶点
            var vertices = event.vertices;
            //清除之前绘制
            view.graphics.removeAll();
            var polygon = new Polygon({
                hasZ: false,
                hasM: false,
                rings: [vertices],
                spatialReference: view.spatialReference
            });
            // 生成绘制的图形
            var graphic = new Graphic({
                geometry: polygon,
                symbol: {
                    type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                    color: [51, 51, 204, 0.9],
                    style: "solid",
                    outline: {  // autocasts as new SimpleLineSymbol()
                        color: "white",
                        width: 1
                    }
                }
            });
            // 将绘制的图形添加到view
            view.graphics.add(graphic);
            if (event.type == "draw-complete") {
                createBuffer(polygon);
            }
        }

        //根据点坐标生成新的线
        function createPoint(event) {
            //获取所有顶点
            var coordinates = event.coordinates;
            var point = new Point({
                hasZ: false,
                hasM: false,
                x: coordinates[0],
                y: coordinates[1],
                spatialReference: view.spatialReference
            });
            //生成绘制的图形
            var graphic = new Graphic({
                geometry: point,
                symbol: {
                    type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                    style: "square",
                    color: "blue",
                    size: "8px",  // pixels
                    outline: {  // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 0],
                        width: 3  // points
                    }
                }
            });
            // 将绘制的图形添加到view
            view.graphics.add(graphic);
            if (event.type == "draw-complete") {
                createBuffer(point);
            }
        }
        //根据点坐标生成新的线
        function createCircle(event) {
            //获取所有顶点
            var vertices = event.vertices;
            //少于一个点无法展示圆
            if (vertices.length < 2) {
                return
            }
            //清除之前绘制
            view.graphics.removeAll();
            //生成绘制的图形,两点画圆
            var center = new Point({
                hasZ: false,
                hasM: false,
                x: vertices[0][0],
                y: vertices[0][1],
                spatialReference: view.spatialReference
            });
            var dis = center.distance(new Point({
                hasZ: false,
                hasM: false,
                x: vertices[1][0],
                y: vertices[1][1],
                spatialReference: view.spatialReference
            }));
            var circle = new Circle({
                hasZ: false,
                hasM: false,
                center: center,
                radius: dis,
                spatialReference: view.spatialReference
            });
            var graphic = new Graphic({
                geometry: circle,
                symbol: {
                    type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                    color: [51, 51, 204, 0.9],
                    style: "solid",
                    outline: {  // autocasts as new SimpleLineSymbol()
                        color: "white",
                        width: 1
                    }
                }
            });
            // 将绘制的图形添加到view
            view.graphics.add(graphic);
            if (event.type == "draw-complete") {
                createBuffer(circle)
            }
        }
        function createRectangle(event) {
            //获取所有顶点
            var vertices = event.vertices;

            //两点画矩形
            if (vertices.length < 2) {
                return
            }
            var rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
            //清除之前绘制
            view.graphics.removeAll();
            var polygon = new Polygon({
                hasZ: false,
                hasM: false,
                rings: [rings],
                spatialReference: view.spatialReference
            });
            // 生成绘制的图形
            var graphic = new Graphic({
                geometry: polygon,
                symbol: {
                    type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                    color: [51, 51, 204, 0.9],
                    style: "solid",
                    outline: {  // autocasts as new SimpleLineSymbol()
                        color: "white",
                        width: 1
                    }
                }
            });
            // 将绘制的图形添加到view
            view.graphics.add(graphic);
            console.log(event);
            if (event.type == "draw-complete") {
                createBuffer(polygon);
            }
        }

        /**
         * 根据geometry生成缓冲区
         * @param geometry 生成的geometry
         */
        function createBuffer(geometry) {
            // var buffer=geometryEngine.geodesicBuffer(geometry,150,"kilometers",false);
            var buffer = geometryEngine.buffer(geometry, 150, "kilometers", false);
            view.graphics.add((new Graphic({
                geometry: buffer,
                symbol: polySym
            })));
        }
    })
</script>
</body>
</html>
